import React from "react";
import "../css/InputBox.css";
import {PENDDING} from "./config";

class InputBox extends React.Component{
  //定义组件的初始化状态
  constructor(props){
    super(props)

  }

  render(){
    return(
        <div className="header-container">
        <div className="header-title">
            <h1>ToDoList</h1>
        </div>
        <div className="header-input">
            <input type="text" className="input-text" 
                    placeholder="添加ToDo"
                    ref="todoInput">

            </input>
            <button type="button" className="input-button"
                    onClick={()=>{
                                //获取输入框的value
                                var value = this.refs.todoInput.value;
                                //容错判断 
                                if(value.length === 0){
                                  alert("添加的内容不能为空");
                                  return;
                                }
                    
                                //组装todo对象
                                var todo = {
                                  content:value,
                                  status:PENDDING//未经定义的魔法值
                                }
                                this.props.addTodo(todo)
                              }}>
                添加
            </button>
        </div>
    </div>  
    //   <div className="input_box_container">
    //     <div>
    //       <input ref="todoInput"/>
    //     </div>
    //     <div>
    //       <button onClick={()=>{
    //         //获取输入框的value
    //         var value = this.refs.todoInput.value;
    //         //容错判断 
    //         if(value.length === 0){
    //           alert("添加的内容不能为空");
    //           return;
    //         }

    //         //组装todo对象
    //         var todo = {
    //           content:value,
    //           status:PENDDING//未经定义的魔法值
    //         }
    //         this.props.addTodo(todo)
    //       }}>添加todo</button>
    //     </div>
    //   </div>
    );
  }
}

export default  InputBox;